<template>
    <div>
       <el-button @click="dialogVisible = true">上架商品</el-button>
           <el-dialog
           title="提示"
           :visible.sync="dialogVisible"
           width="30%"
           >
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                   <el-form-item label="商品名称" prop="name" >
                        <el-select v-model="ruleForm.name" placeholder="请选择" class="demo-form-inline" clearable @change="changeColor">
                            <el-option
                                v-for="item in optionsList[optionsListindex]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                   <el-form-item label="商品价格" prop="price">
                       <el-input v-model="ruleForm.price" type="number"></el-input>
                   </el-form-item>
                   <el-form-item label="内存大小" prop="size">
                       <el-select v-model="ruleForm.size" placeholder="请选择内存" >
                           <el-option v-for="(item,index) in size" :key="index" :label="item" :value="item"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="颜色" prop="color">
                       <el-select v-model="ruleForm.color" placeholder="请选择商品颜色">
                           <el-option v-for="(item,index) in color" :key="index" :label="item" :value="item"></el-option>  
                       </el-select>
                   </el-form-item>
                   <el-form-item label="商品描述" prop="advantage">
                       <el-input type="textarea" v-model="ruleForm.advantage"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                       <el-button @click="resetForm('ruleForm')">重置</el-button>
                   </el-form-item>
               </el-form>
       </el-dialog>
    </div>
</template> 
   <script>
    import axios from 'axios';
    export default{
       name: 'addmidata',
       components: {},
       data() {
           return {
                notShow:true,
                optionsListindex:'',
                sizeAndcolorindex:0,
                optionsList:[],  
                sizes:[],
                size:[],
                colors:[],
                color:[],
                value:'',
                dialogVisible: false,
                ruleForm: {
                    name: '',
                    price:'',
                    size:'',
                    color:'',
                    advantage:'',
                    id:'', 
                   },
                rules: {
                     name: [
                       { required: true, message: '请输入商品名称', trigger: 'blur' },
                       { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
                   ],
                   price: [
                       { required: true, message: '请输入商品价格', trigger: 'blur' }
                   ],
                   size: [
                       { required: true, message: '请选择内存大小', trigger: 'change' }
                   ],
                   color: [ 
                       { required: true, message: '请选择商品颜色', trigger: 'change' }
                   ],
                   advantage: [
                       { required: true, message: '请填写商品描述', trigger: 'blur' }
                   ]
               }
           };
           
       },
       watch: {
            sizeAndcolorindex(){
                this.size = this.sizes[this.sizeAndcolorindex].size
                this.color = this.colors[this.sizeAndcolorindex].color
                
            }
       },
       methods: {
            callback(){
                this.notShow = true
            },
            submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(valid);
                if (valid) {
                    console.log(this.ruleForm);
                    this.$emit('addAppledata',this.ruleForm)
                    this.$refs[formName].resetFields()
                    this.dialogVisible = false 
                    this.callback();
                } else {
                console.log('error submit!!');
                return false;
                }
            });
            },
            resetForm(formName) {
            this.$refs[formName].resetFields();
            this.callback();
            },
            changeColor(){
                this.ipdSize = false;
                this.callback();
                switch(this.ruleForm.name){
                    case 'Xiaomi13限量定制色':
                        this.sizeAndcolorindex = 0;
                        break;
                    case 'Xiaomi13Pro':
                        this.sizeAndcolorindex = 1;
                        break; 
                    case 'Xiaomi13':
                        this.sizeAndcolorindex = 2;
                        break;
                    case 'XiaomiCivi2':
                        this.sizeAndcolorindex = 3;
                        break; 
                    case'XiaomiMIXFold2':
                        this.sizeAndcolorindex = 4;
                        break;
                    case 'Xiaomi12SUltra':
                        this.sizeAndcolorindex = 5;
                        break; 
                    case 'Xiaomi12SPro':
                        this.sizeAndcolorindex = 6;
                        break;
                    case 'Xiaomi12S':
                        this.sizeAndcolorindex = 7;
                        break; 
                    case 'Redmi12C':
                        this.sizeAndcolorindex = 8;
                        break;
                    case 'Redmi10A':
                        this.sizeAndcolorindex = 9;
                        break; 
                    case 'RedmiK60':
                        this.sizeAndcolorindex = 10;
                        break;
                    case 'RedmiK60Pro':
                        this.sizeAndcolorindex = 11;
                        break; 
                    case 'RedmiNote12Pro':
                        this.sizeAndcolorindex = 12;
                        break;
                    case 'RedmiNote12Pro+':
                        this.sizeAndcolorindex = 13;
                        break; 
                    case 'RedmiNote12':
                        this.sizeAndcolorindex = 14;
                        break;
                    case 'RedmiK50至尊版':
                        this.sizeAndcolorindex = 15;
                        break; 
                    case 'RedmiK50Pro':
                        this.sizeAndcolorindex = 16;
                        break; 
                    case 'RedmiK50':
                        this.sizeAndcolorindex = 16;
                        break;
                    case 'RedmiPad':
                        this.sizeAndcolorindex = 17;
                        break;
                    case '小米平板5':
                        this.sizeAndcolorindex = 18;
                        break; 
                    case '小米平板5Pro':
                        this.sizeAndcolorindex = 19;
                        break; 
                    case '小米平板5Pro12.4':
                        this.sizeAndcolorindex = 20;
                        break; 
                    case 'RedmiG2021':
                        this.sizeAndcolorindex = 21;
                        break; 
                    case 'RedmiG游戏本2022':
                        this.sizeAndcolorindex = 22;
                        break;
                    case 'RedmiBookPro14':
                        this.sizeAndcolorindex = 23;
                        break;
                    case 'RedmiBookPro15':
                        this.sizeAndcolorindex = 24;
                        break;
                    case '小米笔记本Pro14':
                        this.sizeAndcolorindex = 25;
                        break;
                    case '小米笔记本Pro15':
                        this.sizeAndcolorindex = 24;
                        break;
                    case '小米笔记本ProX14':
                        this.sizeAndcolorindex = 26;
                        break;
                    case '小米笔记本ProX15':
                        this.sizeAndcolorindex = 27;
                        break;
                    case 'XiaomiBuds4':
                        this.sizeAndcolorindex = 28;
                        break;
                    case 'XiaomiBuds4Pro':
                        this.sizeAndcolorindex = 29;
                        break;
                    case 'RedmiBuds4青春版':
                        this.sizeAndcolorindex = 30;
                        break;
                    case 'Xiaomi真无线降噪耳机3Pro':
                        this.sizeAndcolorindex = 31;
                        break;
                    case 'Xiaomi真无线降噪耳机3':
                        this.sizeAndcolorindex = 32;
                        break; 
                    case 'RedmiBuds4':
                        this.sizeAndcolorindex = 33;
                        break; 
                    case 'RedmiBuds4Pro':
                        this.sizeAndcolorindex = 34;
                        break;   
                    case 'RedmiBuds3':
                        this.sizeAndcolorindex = 35;
                        break;
                    case 'RedmiBuds3青春版':
                        this.sizeAndcolorindex = 36;
                        break;
                    case 'Xiaomi降噪蓝牙耳机Necklace':
                        this.sizeAndcolorindex = 37;
                        break; 
                    case '小米圈铁耳机Pro':
                        this.sizeAndcolorindex = 38;
                        break; 
                    case 'XiaomiSound':
                        this.sizeAndcolorindex = 39;
                        break;
                    case 'XiaomiSoundPro':
                        this.sizeAndcolorindex = 40;
                        break; 
                    case 'Xiaomi智能家庭屏10':
                        this.sizeAndcolorindex = 40;
                        break; 
                    case '小米小爱音箱Pro':
                        this.sizeAndcolorindex = 40;
                        break; 
                    case '小米小爱触屏音箱':
                        this.sizeAndcolorindex = 35;
                        break; 
                    case '小米小爱音箱Play':
                        this.sizeAndcolorindex = 35;
                        break; 
                    case '小米手环7':
                        this.sizeAndcolorindex = 41;
                        break;  
                    case '小米手环7Pro':
                        this.sizeAndcolorindex = 42;
                        break;
                    case 'Redmi手环2':
                        this.sizeAndcolorindex = 43;
                        break;
                    case 'Redmi手表2':
                        this.sizeAndcolorindex = 44;
                        break; 
                    case 'RedmiWatch3':
                        this.sizeAndcolorindex = 45;
                        break;  
                    case 'XiaomiWatchS1':
                        this.sizeAndcolorindex = 46;
                        break;
                    case 'XiaomiWatchS1Pro':
                        this.sizeAndcolorindex = 39;
                        break;
                    case 'XiaomiWatchS2':
                        this.sizeAndcolorindex = 47;
                        break;
                    case 'XiaomiWatchColor2':
                        this.sizeAndcolorindex = 48;
                        break;
                        
                }
            }
       },
       mounted(){
            axios.get('http://localhost:3001/mishowlistindex').then((res) =>{
                    this.optionsListindex = res.data[0].index
                })
            axios.get('http://localhost:3001/optionsList').then((res) => {
                    this.optionsList = res.data
                   })
            axios.get('http://localhost:3001/miSize').then((res) => {
                    this.sizes = res.data
                   })
            axios.get('http://localhost:3001/miColor').then((res) => {
                    this.colors = res.data
                   })
       }

   } 
   </script>
   
   <style scoped lang='scss'></style>